<template>
  <div style="padding: 20px">
    <a-table
      :rowKey="pk"
      :columns="columns"
      :dataSource="dataSource"
      :loading="tableLoading"
      :size="size"
      :bordered="bordered"
      :scroll="scroll"
      :rowSelection="
        mode !== 'checkbox' && mode !== 'radio'
          ? null
          : {
              type: mode,
              selectedRowKeys: selectedRowKeys,
              fixed: true,
              onChange: onSelectChange,
            }
      "
      :pagination="
        !pagination
          ? false
          : {
              current: pageNo,
              pageSize: pageSize,
              total: total,
              showSizeChanger: true,
              showQuickJumper: true,
              pageSizeOptions: ['10', '20', '30'],
              showTotal: (total) => `共 ${total} 条`,
              onChange: jumpPage,
              onShowSizeChange: changePageSize,
            }
      "
    >
      <template v-slot:status="scopedSlots">
        <span
          class="statusColor"
          :class="
            scopedSlots.status === '已完成'
              ? ' statusColorGreed'
              : 'statusColorRed'
          "
        ></span>
        <span>{{ scopedSlots.status }}</span>
      </template>

      <template v-slot:isPay="scopedSlots">
        <span
          class="statusColor"
          :class="
            scopedSlots.isPay === '已付款'
              ? ' statusColorGreed'
              : 'statusColorRed'
          "
        ></span>
        <span>{{ scopedSlots.isPay }}</span>
      </template>

      <template v-slot:no="text, record, index">
        <div>{{ (pageNo - 1) * pageSize + index + 1 }}</div>
      </template>
      <span slot="pic"> </span>
      <template v-slot:action="scopedSlots">
        <div class="action">
          <a-button
            class="btn"
            :type="scopedSlots.completionStatus === '0' ? 'primary' : ''"
            @click="editClick(scopedSlots, '1')"
          >
            {{ scopedSlots.completionStatus === "0" ? "未完成" : "已完成" }}
          </a-button>

          <a-button
            class="btn"
            :type="scopedSlots.completionIsPay === '0' ? 'primary' : ''"
            @click="editClick(scopedSlots, '3')"
          >
            {{ scopedSlots.completionIsPay === "0" ? "未付款" : "已付款" }}
          </a-button>

          <a-button
            class="btn"
            type="primary"
            @click="editClick(scopedSlots, '2')"
          >
            详情
          </a-button>

          <a-button
          v-if="scopedSlots.completionIsPay === '0'&&scopedSlots.completionStatus === '0'"
            class="btn"
             type="danger"
            @click="editClick(scopedSlots, '4')"
          >
            删除
          </a-button>
        </div>
      </template>
    </a-table>
  </div>
</template>

<script>
export default {
  name: "OrderTable",
  props: {
    pk: { type: String, default: "id" },
    columns: { type: Array, default: () => [] },
    dataSource: { type: Array, default: () => [] },
    tableLoading: {
      type: Object,
      default: () => {
        spinning: false;
      },
    },
    bordered: { type: Boolean, default: false },
    pagination: { type: Boolean, default: true },
    total: { type: Number, default: 0 },
    size: { type: String, default: "default" },
    mode: { type: String, default: "" },
    active: { type: Array, default: () => [] },
    scroll: { type: Object, default: () => {} },
  },
  data() {
    return {
      selectedRowKeys: this.active,
      pageNo: 1,
      pageSize: 10,
    };
  },
  methods: {
    editClick(row, index) {
      this.$emit("editClick", { row, index });
    },
    jumpPage(pageNo, pageSize) {
      this.pageNo = pageNo || this.pageNo;
      this.pageSize = pageSize || this.pageSize;
      this.$emit("queryData", { pageNo: pageNo, pageSize: pageSize });
    },
    changePageSize(pageNo, pageSize) {
      this.pageNo = pageNo;
      this.pageSize = pageSize;
      this.$emit("queryData", { pageNo: pageNo, pageSize: pageSize });
    },
    // 选中，取消选中
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
      this.$emit("select", this.selectedRowKeys);
    },
    // 清空selectedRowKeys
    clearSelect() {
      this.selectedRowKeys = [];
    },
    // 在父组件刷新数据时调用子组件传入当前分页参数
    refreshData() {
      this.$emit("queryData", { pageNo: this.pageNo, pageSize: this.pageSize });
    },
    handleConfirm(row) {
      console.log("删除咯", row);
    },
  },
};
</script>

<style lang="less" scoped>
.action {
  display: flex;
}
.btn {
  margin-right: 10px;
}
.statusColor {
  display: inline-block;
  height: 10px;
  width: 10px;
  vertical-align: baseline;
  border-radius: 10px;
  margin-right: 5px;
}
.statusColorRed {
  background-color: red;
}
.statusColorGreed {
  background-color: rgb(44, 216, 10);
}
</style>
